<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-组件</title>
</head>
<body>
<div id="app">
    <b>我是HTML的B标签</b>
    <hr/>
    <component_a></component_a>
    <hr/>
    <p><b>我是一个全局组件</b></p>
    <hr/>
    <component-b></component-b>
    <hr/>
    <component-c></component-c>
    <hr/>
    <!--❌-->
    <componentb></componentb>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    // 定义一个全局组件
    Vue.component('component_a', {
        template: '<p><b>我是一个全局组件</b></p>'
    })

    Vue.component('componentB', {
        template: '<div>我是组件B</div>'
    })
    Vue.component('component-c', {
        template: '<div>我是组件C</div>'
    })
    new Vue({
        el: '#app',
        data() {
            return {}
        }
    })
</script>